<template>
  <div class="orderdetails" ref="homePage">
    <div class="bj">
      <van-nav-bar title="订单详情" style="background: #68c5ba;width: 100%;">
        <van-icon name="arrow-left" slot="left" color="#FFFFFF" @click="mine" />
      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div class="orderdetails_content">
      <div class="details">
        <div class="pay">
          <span>{{dataorder.StatusStr}}</span>
        </div>
        <div v-show="dataorder.QRCodeType == 1" style="width: 200px;height: 200px;display: flex;flex-direction: column;align-items: center;">
          <div  class="code">取票码：{{dataorder.QRCodeStr}}</div>
          <div  class="codeimg"><img :src="dataorder.QRCodeImg"></div>
        </div>
        <div style="width: 100%;height: auto;" v-show="dataorder.QRCodeType == 2">
          <van-swipe :show-indicators="false">
            <van-swipe-item v-for="(list, index) in dataorder.PassengerList" :key="index">
              <p style="height: 40px;text-align: center;line-height: 40px;">{{list.Title}}</p>
              <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="width: 70%;display: flex;flex-direction: column;">
                  <span style="padding: 2px 0;">姓&#12288;名：{{list.UName}}</span>
                  <!-- <span style="padding: 2px 0;">{{list.CredentialsType}}：{{list.CredentialsNo}}</span> -->
                  <span style="padding: 2px 0;" v-show="list.UsingHelp != ''">使用规则：{{list.UsingHelp}}</span>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="details">
        <div style="display: flex;width: 80%;">
          <span>使用日期：</span>
          <div>
            <span v-show="dataorder.UsingDate != ''">{{dataorder.UsingDate}}</span>
            <span v-show="dataorder.UsingDateEnd != ''">-{{dataorder.UsingDateEnd}}</span>&#8194;
            <span v-show="dataorder.HourStr != ''">{{dataorder.HourStr}}</span>
          </div>
        </div>
        <div class="total">数&#12288;&#12288;量：{{dataorder.GoodsSumNum}}</div>
        <div style="width: 80%;">
          <span>使用说明：</span>
          <div style="width: 90%;margin: 0 auto;" v-html="dataorder.UsingHelp"></div>
        </div>
      </div>
      <div class="information">
        <div class="orde">订单信息</div>
        <div class="total">{{dataorder.InfoTitle}}&#12288;：{{dataorder.InfoUName}}</div>
        <div class="total">手机号&#12288;：{{dataorder.InfoMobile}}</div>
        <div v-show="dataorder.InfoIDCard != ''" class="total">身份证&#12288;：{{dataorder.InfoIDCard}}</div>
        <div v-show="dataorder.InfoAddress != ''" class="total">收货&#12288;&#12288;：{{dataorder.InfoProv}}{{dataorder.InfoCity}}{{dataorder.InfoDist}}{{dataorder.InfoAddress}}</div>
        <div v-if="dataorder.Express != null" class="total">快递编号：{{dataorder.Express.Company}}-{{dataorder.Express.SN}}</div>
        <div class="total">订单编号：{{dataorder.ordSN}}</div>
        <div class="total" v-show="dataorder.ReturnBackAddress != ''">退货地址：{{dataorder.ReturnBackAddress}}</div>
        <div class="total">金&#12288;&#12288;额：￥{{dataorder.PayMoney}}</div>
        <div class="total">支付方式：<span v-text="textzhifu(dataorder.PayType)"></span></div>
        <div class="total">下单时间：{{dataorder.CreateDate}}</div>
      </div>
      <!-- <div class="goodsInfo" v-show="dataorder.Goods != null"   >
        <div class="gdTitle">商品信息</div>
        <div class="item">
          <span class="lb">商品名称：</span>
            <span class="val">{{dataorder.Goods.gName}}</span> 
        </div>
        <div class="item">
          <img :src="dataorder.Goods.gCover" width="90%" alt=""> 
        </div>
      </div> -->
  <div class="passengerInfo" v-show="dataorder.Goods != null"  >
        <div class="piTitle">商品信息</div>
        <div class="piContent">
          <div class="piItem" v-for="(item, index) in dataorder.Goods" :key="index">
            <div class="piName">
              <span class="lb">商品名称：</span>
              <span class="val">{{item.gName}}</span>
            </div>
            <div class="codeImg"  >
              <img style="width:210px;height:200px;" :src="item.gCover" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="passengerInfo" v-show="dataorder.PassengerList != null"  >
        <div class="piTitle">游客信息</div>
        <div class="piContent">
          <div class="piItem" v-for="(item, index) in dataorder.PassengerList" :key="index">
            <div class="piName">
              <span class="lb">姓名：</span>
              <span class="val">{{item.UName}}</span>
            </div>
            <div class="piDisc">
              <span class="lb">说明：</span>
              <span class="val">{{item.UsingHelp}}</span>
            </div>
              <div class="codeImg"  >
              <span class="lb">核销码：</span>
              <span class="val">{{item.QRCodeImg}}</span>
            </div>
            <div class="codeImg"  >
              <img :src="item.QRCodeStr" alt="">
            </div>
            <div class="piStatus">
              <span class="lb">状态：</span>
              <span class="val">{{item.QRCodeStatusStr}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="follow">
        <div class="book" v-for="(itme,index) in dataorder.canDoList" @click="submitData(itme)" :key="index">
          <span v-text="canDoList(itme)"></span>
        </div>

      </div>
    </div>
    <van-popup v-model="status_show" position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
    <van-popup v-model="status_showTwo" position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="onCancelTwo" @confirm="onConfirmTwo" />
    </van-popup>
    <van-popup v-model="address" :style="{ height: '30%'}" position="bottom">
      <van-cell-group>
        <van-field label="快递单号" v-model="tracking" placeholder="请输入快递单号" />
        <van-field label="快递公司" v-model="company" placeholder="请输入快递公司" />
      </van-cell-group>
      <div style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
        <van-button @click="submit" type="default" style="width: 30%;font-size: 15px;height: 40px;" color="#46d0ca">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  OrderDetails,
  OrderDo
} from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', //获取页面高度
      dataorder: {Goods:{}},
      tracking: '',//快递单号
      company: '',//快递公司
      status_show: false,
      status_showTwo: false,
      address: false,//收货地址
      columns: ['卖家发错货', '商品成色不符', '收到货物商品破损或少件', '假冒品牌', '不想要了/买错了', '其它']
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    //this.OrderDetails()
  },
  created(){
this.OrderDetails()
  },

  methods: {
    canDoList (type) {
      if (type == "Pay") {
        return '立即支付'
      } else if (type == "Delete") {
        return '删除订单'
      } else if (type == "Cancel") {
        return '取消订单'
      } else if (type == "ApplyRefund") {
        return '申请退款'
      } else if (type == "ApplyReturn") {
        return '申请退货'
      } else if (type == "ConfirmExpress") {
        return '确认收货'
      }
    },
    submit () {
      if (this.tracking == '') {
        this.$toast('快递单号不可为空')
      } else if (this.company == '') {
        this.$toast('快递公司不可为空')
      } else {
        let data = {
          DoType: "ReturnEpressInfo",
          ordSN: this.$route.query.ordSN,
        }
        OrderDo(data).then(res => {
          // console.log(res)
          if (res.Code == 0) {
            this.OrderDetails();
            this.address = false
             this.$toast('操作成功')
          } else {
            this.$toast(res.Msg)
          }
        })
      }
    },
    submitData (type) {// 操作
      console.log(this.$route.query.ordSN)
      let data = {
        DoType: type,
        ordSN: this.$route.query.ordSN,
      }
      if (type == "ApplyReturn") {
        this.status_show = true
      } else if (type == "ApplyRefund") {
        this.status_showTwo = true
      } else if (type == "ReturnEpressInfo") {
        this.address = true
      } else if (type == "Pay") {
        window.location.href = "https://www.anyiyou.cn/public/program/pay/auto.aspx?sns=" + this.$route.query.ordSN
      } else {
        this.$dialog.confirm({
          title: '确认操作',
        }).then(() => {
          // on confirm
          OrderDo(data).then(res => {
            if (res.Code == 0) {
              this.OrderDetails();
              if (type == "Delete") {
                this.$router.go(-1);
              }
                this.$toast('操作成功')
            } else {
              this.$toast(res.Msg)
            }
          })
        }).catch(() => {
          // on cancel
        });

      }
    },
    onConfirm (value, index) {//退货
      let data = {
        DoType: "ApplyReturn",
        ordSN: this.$route.query.ordSN,
        Reason: value,
      }
      OrderDo(data).then(res => {
        if (res.Code == 0) {
          this.OrderDetails();
          console.log(res)
          this.status_show = false
this.$toast('操作成功')

        } else {
          this.$toast(res.Msg)
        }

      })
    },
    onConfirmTwo (value, index) {//退款
      let data = {
        DoType: "ApplyRefund",
        ordSN: this.$route.query.ordSN,
        Reason: value,
      }
      OrderDo(data).then(res => {
        if (res.Code == 0) {
          this.OrderDetails();
          console.log(res)
          this.status_showTwo = false
          this.$toast('操作成功')
        } else {
          this.$toast(res.Msg)
        }
      })
    },
    onCancelTwo () {
      this.status_showTwo = false
      // Toast('取消');
    },
    onCancel () {
      this.status_show = false
      // Toast('取消');
    },

    textzhifu (type) {
      if (type == 0) {
        return '未支付'
      } else if (type == 1) {
        return '微信支付'
      } else if (type == 2) {
        return '支付宝支付'
      }
    },
    mine () {
     // this.$router.go(-1);
       window.location.href = 'https://www.anyiyou.cn/view/#/me'
    },
    OrderDetails () {
      let data = {
        ordSN: this.$route.query.ordSN,
      }
      var that=this;
      OrderDetails(data).then(res => {
        that.dataorder = res.Item
        console.log(that.dataorder.Goods.gName);
      })
    }

  }
}
</script>

<style lang="scss">
.orderdetails {
  background: white;
  .goodsInfo {
    width: 100%;
    display: block;
     justify-content: center;
      align-items: center;
      flex-direction: column;

    .gdTitle {
      display: block;
      width: 100%;
      height: 3.75rem;
      line-height: 3.75rem;
      text-align: center;
      border-bottom: #f2f2f2 solid 1px;
      color: #5c5c5c;
      font-weight: 600;
      font-size: 16px;
    }
    .item {
      display: flex;
      text-align: left;
    }
  }

  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .van-picker__cancel,
  .van-picker__confirm {
    color: #46d0ca !important;
  }
  .orderdetails_content {
    display: flex;
    align-items: center;
    flex-direction: column;

    .details {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      .pay {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ticket {
        // height: 2.5rem;
        line-height: 2.5rem;
      }

      .code {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }

      .codeimg {
         width: 160px;
         height: 160px;

        img {
        width: 100%;
        margin: 0 auto;
        }
      }

      .total {
        width: 80%;
        // height: 2.5rem;
        line-height: 2.5rem;
        font-size: 14px;
      }
    }

    .information {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .orde {
        width: 100%;
        height: 3.75rem;
        line-height: 3.75rem;
        text-align: center;
        border-bottom: #f2f2f2 solid 1px;
        color: #5c5c5c;
        font-weight: 600;
        font-size: 16px;
      }

      .total {
        width: 80%;
        // height: 2.5rem;
        line-height: 2.5rem;
        font-size: 14px;
      }
    }

    .follow {
      display: flex;
      width: 100%;
      height: 100px;
      justify-content: center;
      align-items: center;
      border-top: #f2f2f2 solid 0.0625rem;

      .book {
        width: 90px;
        background: #46d0ca;
        color: white;
        height: 30px;
        margin: 3px;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
      }
      .refund {
        width: 40%;
        background: #b5b5b5;
        color: white;
        height: 30px;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
      }
    }
  }
}
</style>
